import React, { Component } from 'react';

class TodoFooter extends Component {
  state = {

  }
  render() {
    const { list, type } = this.props
    const leftCount = list.filter(v => !v.done).length
    const isShow = list.some(v => v.done)
    if (list.length === 0) {
      return (
        <div>暂无数据</div>
      )
    }
    return (
      <div>
        <footer className="footer">
          <span className="todo-count"><strong>{leftCount}</strong> item left</span>
          <ul className="filters">
            <li>
              <a onClick={() => this.handleClick('all')} className={type === 'all' ? ' selected' : ''} href="#/">All</a>
            </li>
            <li>
              <a onClick={() => this.handleClick('active')} className={type === 'active' ? ' selected' : ''} href="#/active">Active</a>
            </li>
            <li>
              <a onClick={() => this.handleClick('completed')} className={type === 'completed' ? ' selected' : ''} href="#/completed">Completed</a>
            </li>
          </ul>
          {isShow && <button onClick={this.clearTodo} className="clear-completed">Clear completed</button>}
        </footer>
      </div>
    );
  }
  clearTodo = () => {
    this.props.clearTodo()
  }
  handleClick = (type) => {
    console.log(type);
    this.props.handleClick(type)
  }
}

export default TodoFooter;
